// @import './common.scss';
// @import './header.scss';
// @import './footer.scss';
@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    list-style: none;
}

.web {
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    border: 1px solid red;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    ul {
        position: relative;
        width: 40vw;
        height: 40vw;
        // background-color: green;
        transition: none;
        transform-origin: center;
        li {
            position: absolute;
            border: 1px solid purple;
            transform-origin: right bottom;
            span {
                position: absolute;
                // top: 50%;
                // left: 50%;
                // transform: translate(-50%, -50%);
                font-size: 20px;
                color: blue;
                left: 43%;
                top: 50%;
                // transform: translateY(50%) rotate(-60deg);
            }
        }
        // li:nth-of-type(2) span {
        //     // font-size: 30px;
        //     transform: rotate(0deg)
        // }
        li:nth-of-type(2n) {
            background-color: black;
        }
        // li:nth-of-type(1) {
        //     border: 1px solid purple;
        //     transform-origin: right bottom;
        //     transform: rotate(0deg) skew(30deg);
        // }
        // li:nth-of-type(2) {
        //     border: 1px solid purple;
        //     transform-origin: right bottom;
        //     transform: rotate( 60deg) skew( 30deg);
        // }
        // li:nth-of-type(3) {
        //     border: 1px solid purple;
        //     transform-origin: right bottom;
        //     transform: rotate( 120deg) skew( 30deg);
        // }
        // li:nth-of-type(4) {
        //     border: 1px solid purple;
        //     transform-origin: right bottom;
        //     transform: rotate( 180deg) skew( 30deg);
        // }
        // li:nth-of-type(3) {
        //     border: 1px solid purple;
        //     transform-origin: right bottom;
        //     transform: rotate( 60deg) skew( 30deg);
        // }
        // li:nth-of-type(2n) {
        //     position: absolute;
        //     background-color: green;
        //     transform-origin: right bottom;
        // }
        // li:nth-of-type(2n - 1) {
        //     position: absolute;
        //     // background-color: yellow;
        //     border: 1px solid yellow;
        //     transform-origin: right bottom;
        // }
    }
    .startController {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
    }
}